<template>
	<gracePage :customHeader="false">
		<!-- 页面主体 -->
		<view slot="gBody" class="grace-body">
			<graceNavBar
				class="nav-bar"
				:items="tabs"
				:isCenter="true"
				activeLineRadius="20rpx"
				activeDirection="center"
				textAlign="center"
				color="#969696"
				lineHeight="30rpx"
				:size="220"
				activeLineWidth="50rpx"
				activeLineHeight="10rpx"
				activeLineBg="#FEDE33"
				:currentIndex="currentIndex"
				@change="navChange"
			></graceNavBar>
			<swiper :style="{ height: mainHeight + 'px' }" :current="currentIndex" @change="swiperChange">
				<swiper-item v-for="(friend, friendIndex) in friendList" :key="friendIndex">
					<scroll-view scroll-y :style="{ height: mainHeight + 'px' }"  @scrolltolower="scrollend">
						<view class="empty-view grace-flex-center  grace-flex-vcenter grace-animate fadeIn" v-if="friend.list.length === 0">
							<image class="empty-img" mode="widthFix" src="/static/image/nothing.png"></image>
						</view>
						<block v-for="(item, index) in friend.list" :key="index"><friend-list :item="item"></friend-list></block>
						<graceLoading :loadingType="friend.loadingType"></graceLoading>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</gracePage>
</template>

<script>
var graceJS = require('@/Grace.JS/grace.js');
export default {
	data() {
		return {
			currentIndex: 0,
			mainHeight: 500,
			tabs: [],
			newData: [
				{
					userAvatar: '../../static/demo/userpic/8.jpg',
					username: '涛哥哥11',
					sex: 0, //0 男 1女
					age: 25,
					isFollow: true
				},
				{
					userAvatar: '../../static/demo/userpic/9.jpg',
					username: '涛哥哥22',
					sex: 0, //0 男 1女
					age: 25,
					isFollow: true
				},
				{
					userAvatar: '../../static/demo/userpic/10.jpg',
					username: '涛哥哥33',
					sex: 1, //0 男 1女
					age: 25,
					isFollow: true
				}
			],
			friendList: [
				{
					loadingType:3,
					page:1,
					list: [
						{
							userAvatar: '../../static/demo/userpic/8.jpg',
							username: '涛哥哥',
							sex: 0, //0 男 1女
							age: 25,
							isFollow: true
						},
						{
							userAvatar: '../../static/demo/userpic/9.jpg',
							username: '涛哥哥',
							sex: 0, //0 男 1女
							age: 25,
							isFollow: true
						},
						{
							userAvatar: '../../static/demo/userpic/10.jpg',
							username: '涛哥哥',
							sex: 1, //0 男 1女
							age: 25,
							isFollow: true
						},
						{
							userAvatar: '../../static/demo/userpic/8.jpg',
							username: '涛哥哥',
							sex: 0, //0 男 1女
							age: 25,
							isFollow: true
						},
						{
							userAvatar: '../../static/demo/userpic/9.jpg',
							username: '涛哥哥',
							sex: 0, //0 男 1女
							age: 25,
							isFollow: true
						},
						{
							userAvatar: '../../static/demo/userpic/10.jpg',
							username: '涛哥哥',
							sex: 1, //0 男 1女
							age: 25,
							isFollow: true
						}
					]
				},
				{
					loadingType:3,
					page:1,
					list: [
						{
							userAvatar: '../../static/demo/userpic/8.jpg',
							username: '涛哥哥',
							sex: 0, //0 男 1女
							age: 25,
							isFollow: true
						},
						{
							userAvatar: '../../static/demo/userpic/9.jpg',
							username: '涛哥哥',
							sex: 0, //0 男 1女
							age: 25,
							isFollow: true
						},
						{
							userAvatar: '../../static/demo/userpic/10.jpg',
							username: '涛哥哥',
							sex: 0, //0 男 1女
							age: 25,
							isFollow: true
						}
					]
				},
				{
					loadingType:3,
					page:1,
					list: [
						{
							userAvatar: '../../static/demo/userpic/8.jpg',
							username: '涛哥哥',
							sex: 0, //0 男 1女
							age: 25,
							isFollow: false
						},
						{
							userAvatar: '../../static/demo/userpic/9.jpg',
							username: '涛哥哥',
							sex: 0, //0 男 1女
							age: 25,
							isFollow: false
						},
						{
							userAvatar: '../../static/demo/userpic/10.jpg',
							username: '涛哥哥',
							sex: 0, //0 男 1女
							age: 25,
							isFollow: false
						}
					]
				}
			]
		};
	},
	onReady() {
		this.mainHeight = graceJS.system().windowHeight - uni.upx2px(80);
		//加载分类信息 初始化数据
		this.getCate();
	},
	onNavigationBarButtonTap(e) {
		if (e.index == 0) {
			uni.navigateBack({});
		}
	},
	methods: {
		navChange(index) {
			this.currentIndex = index;
		},
		swiperChange(e) {
			let index = e.detail.current;
			this.currentIndex = index;
		},
		getCate() {
			[
				{
					title: '互关',
					num: 10
				},
				{
					title: '关注',
					num: 10
				},
				{
					title: '粉丝',
					num: 10
				}
			].forEach(e => {
				this.tabs.push(`${e.title}${e.num}`);
			});
		},
		scrollend() {
			// 判断加载状态避免多次滚动时有加载尚未完成
			if (this.friendList[this.currentIndex].loadingType === 2 || this.friendList[this.currentIndex].loadingType === 4) {
				return false;
			}
			this.loadMore();
		},
		//加载更多时执行的函数
		loadMore() {
			let item = this.friendList[this.currentIndex]
			item.loadingType = 1;
			//追加数据(延迟1秒 模拟网络请求)
			setTimeout(() => {
				if (item.page > 3) {
					item.loadingType = 2;
					return;
				}
		
				item.list = item.list.concat(this.newData);
		
				// 页码增加
				item.page++;
				setTimeout(() => {
						item.loadingType = 3;
				}, 300);
			}, 1000);
		}
	}
};
</script>

<style lang="stylus">
.nav-bar
	line-height 80rpx
	height 80rpx
.empty-view
	background #FFFFFF
	position absolute
	top 0
	bottom 0
	left 0
	right 0
	.empty-img
		width 40%
</style>
